<template>
  <!-- 头部 -->
  <div class="public-header flex justify-around pb-16px">
    <div class="flex item-center flex-1">
      <i
        class="wk wk-contacts icon clue-size mr-4px color-#42526e"
        v-if="pageType == 'contact'"
      ></i>
      <i
        class="wk wk-receivables icon clue-size mr-4px color-#42526e"
        v-if="pageType == 'receivable'"
      ></i>
      <i
        class="wk wk-icon-receivable icon clue-size mr-4px color-#42526e"
        v-if="pageType == 'receivablePlan'"
      ></i>
      <i
        class="wk wk-business icon clue-size mr-4px color-#42526e"
        v-if="pageType == 'business'"
      ></i>
      <i
        class="wk wk-contract icon clue-size mr-4px color-#42526e"
        v-if="pageType == 'contract'"
      ></i>
      <span class="clue-title mr-4px">{{ sceneFilter[pageType].title }}</span>
    </div>
    <div class="flex item-center justify-end flex-1">
      <el-button
        type="primary"
        color="#0052cc"
        v-hasPermi="[sceneFilter[pageType].hasPermiCreate]"
        @click="openForm('create')"
        ><el-icon class="mr-4px"><Edit /></el-icon> {{ sceneFilter[pageType].addName }}</el-button
      >
      <el-tooltip
        class="box-item"
        effect="dark"
        content="导出"
        placement="top-start"
        v-if="pageType != 'receivable' && pageType != 'receivablePlan'"
      >
        <el-button
          v-hasPermi="[sceneFilter[pageType].hasPermiExport]"
          type="info"
          :disabled="exportLoading"
          @click="exportData('export')"
        >
          <i class="el-icon wk wk-export !mt-0 s14"></i>
        </el-button>
      </el-tooltip>
    </div>
  </div>
  <!-- 操作 -->
  <div class="flex item-center pb-16px">
    <el-input
      style="max-width: 200px; height: 32px; flex-shrink: 0"
      v-model.trim="threeInOne"
      :placeholder="sceneFilter[pageType].inputName"
      class="input-with-select"
      v-if="pageType != 'receivablePlan'"
    >
      <template #append>
        <el-button @click="searchFilter" :icon="Search" />
      </template>
    </el-input>
    <div class="flex item-center ml-24px flex-1">
      <div style="line-height: 32px" class="t-color mr-4px s14">显示:</div>
      <el-select-v2
        filterable
        clearable
        placeholder="请选择客户"
        v-model="customerId"
        class="w-200px mr-10px"
        @change="searchCustomer"
        :options="customerList"
        :props="{
          value: 'id',
          label: 'name'
        }"
      >
      </el-select-v2>
      <el-button
        v-for="(item, index) in sceneList"
        class="btn-s"
        :key="index"
        @click="selectScene(item.value, item.id, item.params)"
        :class="{ active: sceneSelectId == item.id }"
      >
        {{ item.name }}
      </el-button>
    </div>
    <div> </div>
  </div>
  <!-- 联系人：新增 -->
  <ContactForm ref="contactRef" @success="emit('init')" />
  <!-- 商机：新增 -->
  <BusinessForm ref="businessRef" @success="emit('init')" />
  <!-- 合同:新增 -->
  <ContractForm ref="contractRef" @success="emit('init')" />
  <!-- 回款:新增 -->
  <ReceivableForm ref="receivableRef" @success="emit('init')" />
  <!-- 回款:计划新增 -->
  <ReceivablePlanForm ref="receivablePlanRef" @success="emit('init')" />
</template>
<script setup>
import * as CustomerApi from '@/api/crm/customer'
import * as ContractApi from '@/api/crm/contract'

import {
  QuestionFilled,
  Edit,
  DocumentCopy,
  Search,
  ArrowDown,
  ArrowUp,
  Close
} from '@element-plus/icons-vue'
import ContactForm from '@/views/crm/contact/ContactForm.vue'
import BusinessForm from '@/views/crm/business/BusinessForm.vue'
import ContractForm from '@/views/crm/contract/ContractForm.vue'
import ReceivableForm from '@/views/crm/receivable/ReceivableForm.vue'
import ReceivablePlanForm from '@/views/crm/receivable/plan/ReceivablePlanForm.vue'
const customerId = ref()
const props = defineProps({
  pageType: String,
  moduleOption: Array,
  exportLoading: Boolean
})
const emit = defineEmits([
  'calculateTable',
  'sceneTypeSearch',
  'threeSearch',
  'exportValue',
  'customerSearch',
  'init'
])
const threeInOne = ref('')
const contactRef = ref(null)
const businessRef = ref(null)
const contractRef = ref(null)
const receivableRef = ref(null)
const receivablePlanRef = ref(null)
const sceneSelectId = ref('')
const sceneList = ref([])

const sceneFilter = {
  contact: {
    inputName: '联系人名称/手机/电话',
    title: '联系人管理',
    addName: '新增联系人',
    sceneType: 'crm_contact',
    refValue: contactRef,
    hasPermiCreate: `crm:contact:create`,
    hasPermiExport: `crm:contact:export`,
    scene: [
      { name: '全部联系人', value: '', id: -1 },
      { name: '我负责的联系人', value: 1, id: -2 },
      { name: '我参与的联系人', value: 2, id: -3 },
      { name: '下属负责的联系人', value: 3, id: -4 }
    ]
  },
  business: {
    inputName: '商机名称',
    title: '商机管理',
    addName: '新增商机',
    sceneType: 'crm_business',
    refValue: businessRef,
    hasPermiCreate: `crm:business:create`,
    hasPermiExport: `crm:business:export`,
    scene: [
      { name: '全部商机', value: '', id: -1 },
      { name: '我负责的商机', value: 1, id: -2 },
      { name: '我参与的商机', value: 2, id: -3 },
      { name: '下属负责的商机', value: 3, id: -4 }
    ]
  },
  contract: {
    inputName: '合同名称',
    title: '合同管理',
    addName: '新增合同',
    sceneType: 'crm_contract',
    refValue: contractRef,
    hasPermiCreate: `crm:contract:create`,
    hasPermiExport: `crm:contract:export`,
    scene: [
      { name: '全部合同', value: '', id: -1 },
      { name: '我负责的合同', value: 1, id: -2 },
      { name: '我参与的合同', value: 2, id: -3 },
      { name: '下属负责的合同', value: 3, id: -4 }
    ]
  },
  receivable: {
    inputName: '回款编号',
    title: '回款管理',
    addName: '新增回款',
    sceneType: 'crm_receivable',
    refValue: receivableRef,
    hasPermiCreate: `crm:receivable:create`,
    hasPermiExport: `crm:receivable:export`,
    scene: [
      { name: '全部回款', value: '', id: -1 },
      { name: '我负责的回款', value: 1, id: -2 },
      { name: '我参与的回款', value: 2, id: -3 },
      { name: '下属负责的回款', value: 3, id: -4 }
    ]
  },
  receivablePlan: {
    inputName: '回款计划',
    title: '回款计划管理',
    addName: '新增回款计划',
    sceneType: 'crm_receivable_Plan',
    refValue: receivablePlanRef,
    hasPermiCreate: `crm:receivable-plan:create`,
    hasPermiExport: `crm:receivable-plan:export`,
    scene: [
      { name: '全部回款计划', value: '', id: -1 },
      { name: '我负责的回款计划', value: 1, id: -2 },
      { name: '下属负责的回款计划', value: 3, id: -4 }
    ]
  }
}
/**导入*/
const exportData = (val) => {
  emit('exportValue', val)
}
/**子组件告诉父组件自己的高度*/
const tellHeight = (val) => {
  emit('calculateTable', val)
}
/**列表的新增、编辑*/
const openForm = (type, id) => {
  sceneFilter[props.pageType].refValue.value.open(type, id)
}
const customerList = ref([])
const getCustomerList = async () => {
  customerList.value = await CustomerApi.getCustomerSimpleList()
}
onMounted(() => {
  getCustomerList()
})
watch(
  () => props.pageType,
  (val) => {
    sceneList.value = [...sceneFilter[props.pageType].scene]
  },
  { immediate: true, deep: true }
)

/**选择筛选*/
const selectScene = (value, id, params) => {
  emit('sceneTypeSearch', value)
  sceneSelectId.value = id
}
const searchCustomer = () => {
  emit('customerSearch', customerId.value)
}
/**三合一的筛选*/
const searchFilter = () => {
  emit('threeSearch', threeInOne.value)
}
</script>

<style scoped lang="scss">
.clue-size {
  font-size: 24px;
  margin-top: 3px;
}
.clue-title {
  font-size: 24px;
  font-weight: bold;
  color: #42526e;
}
.s14 {
  font-size: 14px;
}
.el-icon {
  margin-top: 0 !important;
}
.t-color {
  color: #172b4d;
}
.btn-s {
  border: none;
}
.active {
  background-color: #344563;
  // background-color: #0052cc;
  color: #fff;
}
</style>
